<template>
<view class="sear">
        <view class="inputsearch">
            <input placeholder="请输入礼品" type="text" @input="getkey" />
            <button class="searchsubmit" @click="goSearch" size="mini">搜索</button>
        </view>
        <view class="searchresult" v-if="searchresult">
            <view class="result" @click="gotodetail(item.product_id)" :data-id="item.id" v-for="(item, index) in list" :key="index">
                {{ item.product_name }}
            </view>
			<view class="fresult" v-if="list.length == 0">查无此礼品!</view>
        </view>
</view>
</template>

<script>
// pages/search/search.js
// let db = wx.cloud.database();
export default {
    data() {
        return {
            key: '',
            list: [],
            searchresult: false
        };
    },
    methods: {
        getkey(e) {
            this.setData({
                key: e.detail.value
            });
        },

        goSearch() {
			let that=this
            if (this.key) {
                uni.request({
                	url:"/api/product/getProductBySearch",
					data:{
						search:this.key,
					currentPage:1,
					pageSize:1,
					},
					method:"POST",
					success(res) {
						console.log(res.data.Product[0]);
						that.list=res.data.Product
						that.searchresult=true
					}
                })
            } else {
                uni.showToast({
                    icon: 'error',
                    title: '请输入内容'
                });
            }
        },

        gotodetail: function (product_id) {
            uni.navigateTo({
                url: '/pages/goodsdetail/goodsdetail?id=' + product_id
            });
        }
    }
};
</script>
<style>
/* pages/search/search.wxss */
.sear{
	height: 100%;
}
.inputsearch {
    height: 50px;
    border: 2px solid #f1f1f1;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: relative;
}
.inputsearch input {
    width: 70%;
    height: 30px;
    background: #e8e8ed;
    border-radius: 30px;
    padding-left: 15px;
    font-size: 14px;
    margin-left: 5%;
    /*这里有问题需要在调节*/
}
.searchsubmit {
    background: #ef9b9b;
    color: #fff;
}
.searchresult {
    position: absolute;
    top: 55px;
    left: 0;
    width: 100%;
    height: 888px;
    background: #fff;
}
.fresult,
.result {
    height: 50px;
    line-height: 50px;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid #eee;
    padding-left: 25px;
    color: #333;
    font-family: '微软雅黑';
    font-size: 16px;
}
</style>
